import React from 'react';
import { Card, Table,Button,Modal,message } from 'antd';
import Api from './../../api';
import './ui.less';
import Utils from '../../utils/utils';

export default class Tables extends React.Component {
  state = {
    dataSource: [],
    dataSourceActive: []
  }

  params={
    page:1
  }

  componentDidMount() {
    const dataSource = [
      {
        id: '0001',
        username: 'ject',
        sex: 'men',
        state: '咸鱼',
        interest: '足球',
        birthday: '2018-08-01',
        address: 'abc',
        time: '08:00'
      },
      {
        id: '0002',
        username: 'ject',
        sex: 'men',
        state: '咸鱼',
        interest: '足球',
        birthday: '2018-08-01',
        address: 'abc',
        time: '08:00'
      },
      {
        id: '0003',
        username: 'ject',
        sex: 'men',
        state: '咸鱼',
        interest: '足球',
        birthday: '2018-08-01',
        address: 'abc',
        time: '08:00'
      }
    ]
    dataSource.map((item,index)=>{
      return item.key=index;
    })
    this.setState({
      dataSource
    })

    this.request();
  }

  //动态获取mock数据
  request = () => {
    let _this=this;
    Api.ajax('GET', '/table/list', {
      page: this.params.page,
      pageSize: 10,
    }).then((res) => {
      res.data.result.map((item,index)=>{
        return item.key=index;
      })
      this.setState({
        dataSourceActive: res.data.result,
        selectedRowKeys:[],
        selectedRows:null,
        pagination:Utils.pagination(res.data,(current)=>{
          //to-do
          _this.params.page=current;
          this.request();
        })
      })
    })
  }

  onRowClick = (record, index) => {
    let selectKey = [index];
    this.setState({
      selectedRowKeys: selectKey,
      selectedItem: record
    })
  }

  //
  handelDalete=()=>{
    let rows=this.state.selectedRows;
    let ids=[];
    rows.map((item)=>{
      ids.push(item.id)
    })
    Modal.confirm({
      title:'删除提示',
      content:`您确定要删除这些数据吗?${ids}`,
      onOk:()=>{
        message.success('删除成功')
        this.request()
      }
    })
  }

  render() {
    const columns = [
      {
        title: 'id',
        dataIndex: 'id'
      },
      {
        title: '用户名',
        dataIndex: 'username'
      },
      {
        title: '性别',
        dataIndex: 'sex',
        render(value) {
          return value == 1 ? '男' : '女'
        }
      },
      {
        title: '状态',
        dataIndex: 'state',
        render(value) {
          let config = {
            '1': '咸鱼1',
            '2': '才子',
            '3': '咸鱼2',
            '4': '咸鱼3',
            '5': '咸鱼5'
          }
          return config[value]
        }
      },
      {
        title: '爱好',
        dataIndex: 'interest'
      },
      {
        title: '生日',
        dataIndex: 'birthday'
      },
      {
        title: '地址',
        dataIndex: 'address'
      },
      {
        title: '早起时间',
        dataIndex: 'time'
      },
    ]
    const { selectedRowKeys } = this.state;
    const rowSelection = {
      type: 'radio',
      selectedRowKeys
    }
    const rowCheckSelection={
      type:'checkbox',
      selectedRowKeys,
      onChange:(selectedRowKeys,selectedRows)=>{
        this.setState({
          selectedRowKeys,
          selectedRows
        })
      }
    }
    return (
      <div>
        <Card title="基础表格" className="card_wrapper">
          <Table
            bordered
            columns={columns}
            dataSource={this.state.dataSource}
          />
        </Card>
        <Card title="动态数据渲染" className="card_wrapper">
          <Table
            bordered
            columns={columns}
            dataSource={this.state.dataSourceActive}
          />
        </Card>
        <Card title="mock-单选" className="card_wrapper">
          <Table
            bordered
            columns={columns}
            onRow={(record, index) => {
              return {
                onClick: () => {
                  this.onRowClick(record, index);
                }
              }
            }}
            rowSelection={rowSelection}
            dataSource={this.state.dataSourceActive}
          />
        </Card>
        <Card title="mock-多选" className="card_wrapper">
          <div>
            <Button onClick={this.handelDalete}>删除</Button>
          </div>
          <Table
            bordered
            columns={columns}
            rowSelection={rowCheckSelection}
            dataSource={this.state.dataSourceActive}
          />
        </Card>
        <Card title="mock-表格分页" className="card_wrapper">
          <Table
            bordered
            columns={columns}
            dataSource={this.state.dataSourceActive}
            pagination={this.state.pagination}
          />
        </Card>
      </div>
    )
  }
}